<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="干预措施">
				<view slot="center" class="navTitle">
					干预措施
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="wbox">
						<view class="wtit">
							<view class="tl">
								<view class="ico">
									<image src="@/static/images/icon-wjdj.svg" mode="aspectFit"></image>
								</view>
								<view class="t">
									危机等级
								</view>
							</view>
							<view class="tr">
								<view class="tag"
									:style="'color:'+stageOption(info.stage).color+';background:'+stageOption(info.stage).bgColor">
									{{stageOption(info.stage).label}}
								</view>
							</view>
						</view>
						<view class="interveneGrade">
							<view class="cl">
								查看学生档案权限
							</view>
							<view class="cr">
								<CheckboxGroup :multiple="true" :options="permissions" @change="updatePermission" :value="form.viewPermission"></CheckboxGroup>
							</view>
						</view>
					</view>
					<view class="wbox gyform s1" v-if="form.allTask.length>0">
						<view class="wtit">
							<view class="tl">
								干预措施
							</view>
							<view class="tr">
								<view class="btn">
									任务对象
								</view>
							</view>
						</view>
						<view class="rwdx">
							{{TaskObjective(form.allTask[0].taskTarget).text}}
						</view>
						<view class="workList">
							<view class="workBox">
								<view class="wkitem" v-for="(l,lindex) in form.allTask" :key="lindex">
									<view class="tit pink" :class="lindex==0?'s2':''">
										<view class="titin">
											<view class="tl">
												<view class="or">{{(lindex+1)}}</view>
												<view class="t">
													{{l.name}}
												</view>
											</view>
											<view class="tr">
												<view class="del" @tap="delAllTask(lindex)">
													<image src="@/static/images/icon-delete.svg" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
									<template v-for="(m,mindex) in l.list">
										<view class="rpt">
											<view class="subt" v-if="m.messageType==0">
												<view class="dot"></view>
												<view class="tc" style="background: none;padding-left: 0;padding-right: 0;">
													<view class="t">{{m.title}}</view>
													<view class="tr btns">
														<view class="btn" @tap="previewLetter(info.id,m.formid)">
															预览
														</view>
														<view class="btn on" @tap="openLetterForm(info.id)">
															填写表单
														</view>
													</view>
												</view>
											</view>
											<view class="subt" v-else-if="m.messageType==5">
												<view class="dot"></view>
												<view class="tc" style="background: linear-gradient(90deg, #f2f2f2, #fff);padding-left: 22rpx;padding-right: 0;">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="btn" @tap="viewNoticeTemplate(0,{grade:info.grade,class:info.class,name:info.name})">
															预览
														</view>
													</view>
												</view>
											</view>
											<view class="subt" v-else-if="m.messageType==6">
												<view class="dot"></view>
												<view class="tc" style="background: none;padding:0;">
													<view class="t">会议时间/地点</view>
													<view class="tr"></view>
												</view>
											</view>
											<view class="subt" v-else-if="m.messageType==9">
												<view class="dot"></view>
												<view class="tc" style="background: linear-gradient(90deg, #f2f2f2, #fff);padding-left: 22rpx;padding-right: 0;">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="btn" @tap="viewSafetyNotice('allTask',lindex,mindex,m.formdata)">
															预览
														</view>
													</view>
												</view>
											</view>
											<view class="subt" v-else-if="m.messageType==10">
												<view class="dot"></view>
												<view class="tc" style="background: linear-gradient(90deg, #f2f2f2, #fff);padding-left: 22rpx;padding-right: 0;">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="btn" @tap="viewConsultationTemplate({toName:m.toName,grade:info.grade,class:info.class,name:info.name,form:l.list[0].formdata})">
															预览
														</view>
													</view>
												</view>
											</view>
											<view class="subt" v-else>
												<view class="dot"></view>
												<view class="tc">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="del" @tap="delItem('allTask',lindex,mindex)">
															<image src="@/static/images/icon-cha.svg" mode="aspectFit"></image>
														</view>
													</view>
												</view>
											</view>
											
											<view class="ul" v-if="m.messageType==6">
												<view class="li">
													<view class="hzform">
														<view class="hi">
															<DateRange formate="YYYY/MM/DD hh:mm" mode='datetime' @change="setConsultationDate" startPlaceholder="会诊开始时间" endPlaceholder="会诊结束时间"></DateRange>
														</view>
														<view class="hi">
															<input type="text" placeholder="会诊地点" v-model="m.formdata.location" />
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<view class="btncon" v-if="l.workType==3&&info.taskOptions">
										<view class="wtips">
											<rich-text :nodes="info.taskOptions.tips.student"></rich-text>
										</view>
									</view>
									<view class="rpt" v-if="info&&(info.stage==6||info.stage==7)&&lindex==0">
										<view class="subt s2" style="padding: 22rpx 0;">
											<view class="dot"></view>
											<view class="tc" style="background: none;padding: 0;">
												<view class="t" style="color: #65554d;">{{info.taskOptions.netHospital.title}}（可选）</view>
												<view class="tr"></view>
											</view>
										</view>
										<view class="subt nodot">
											<view class="dot" style="opacity: 0;"></view>
											<view class="tc" style="padding: 22rpx;background: #f2f2f2;">
												<view class="t">{{info.taskOptions.netHospital.subtitle}}</view>
												<view class="tr btns">
													<view class="vl"></view>
													<view class="wm" @tap="viewDetail(info.taskOptions.netHospital.id)">
														预览
													</view>
													<view class="sw">
														<u-switch space="3" activeColor="#fe9c29" inactiveColor="#dadada" v-model="isNetHospital" size="20" ></u-switch>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox gyform s1" v-if="form.studentTask.length>0">
						<view class="wtit">
							<view class="tl">
								干预措施
							</view>
							<view class="tr">
								<view class="targetTag">
									<view class="tt">
										任务对象
									</view>
									<view class="tp">
										当事学生
									</view>
								</view>
							</view>
						</view>
						<view class="workList">
							<view class="workBox">
								<view class="wkitem" v-for="(l,lindex) in form.studentTask" :key="lindex">
									<view class="tit pink" :class="lindex==0?'s2':''">
										<view class="titin">
											<view class="tl">
												<view class="or">{{(lindex+1)}}</view>
												<view class="t">
													{{l.name}}
												</view>
											</view>
											<view class="tr">
												<view class="del" @tap="delStudentTask(lindex)">
													<image src="@/static/images/icon-delete.svg" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
									<template v-for="(m,mindex) in l.list">
										<view class="rpt">
											<view class="subt">
												<view class="dot"></view>
												<view class="tc">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="del" @tap="delItem('studentTask',lindex,mindex)">
															<image src="@/static/images/icon-cha.svg" mode="aspectFit"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<view class="btncon" v-if="l.workType==1">
										<view class="addbtn" @tap="openLessonSelect('studentTask',lindex)">
											添加
										</view>
									</view>
									<view class="btncon" v-if="l.workType==3&&info.taskOptions">
										<view class="wtips">
											<rich-text :nodes="info.taskOptions.tips.student"></rich-text>
										</view>
									</view>
									<view class="rpt" v-if="info&&info.stage==2&&lindex==(form.studentTask.length-1)">
										<view class="subt s2">
											<view class="dot"></view>
											<view class="tc" style="background: none;padding: 0;">
												<view class="t" style="color: #65554d;">{{info.taskOptions.netHospital.title}}（可选）</view>
												<view class="tr"></view>
											</view>
										</view>
										<view class="subt">
											<view class="dot" style="opacity: 0;"></view>
											<view class="tc" style="padding: 22rpx;background: #f2f2f2;">
												<view class="t">{{info.taskOptions.netHospital.subtitle}}</view>
												<view class="tr btns">
													<view class="vl"></view>
													<view class="wm" @tap="viewDetail(info.taskOptions.netHospital.id)">
														预览
													</view>
													<view class="sw">
														<u-switch space="3" activeColor="#fe9c29" inactiveColor="#dadada" v-model="isNetHospital" size="20" ></u-switch>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox gyform s2" v-if="form.teacherTask.length>0">
						<view class="wtit">
							<view class="tl">
								干预措施
							</view>
							<view class="tr">
								<view class="targetTag">
									<view class="tt">
										任务对象
									</view>
									<view class="tp">
										班主任
									</view>
								</view>
							</view>
						</view>
						<view class="workList">
							<view class="workBox">
								<view class="wkitem" v-for="(l,lindex) in form.teacherTask" :key="lindex">
									<view class="tit pink" :class="lindex==0?'s2':''">
										<view class="titin">
											<view class="tl">
												<view class="or">{{(lindex+1)}}</view>
												<view class="t">
													{{l.name}}
												</view>
											</view>
											<view class="tr">
												<view class="del" @tap="delTeacherTask(lindex)">
													<image src="@/static/images/icon-delete.svg" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
									<template v-for="(m,mindex) in l.list">
										<view class="rpt">
											<view class="subt">
												<view class="dot"></view>
												<view class="tc">
													<view class="t">{{m.title}}</view>
													<view class="tr"></view>
												</view>
											</view>
										</view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox gyform s3" v-if="form.parentTask.length>0">
						<view class="wtit">
							<view class="tl">
								干预措施
							</view>
							<view class="tr">
								<view class="targetTag">
									<view class="tt">
										任务对象
									</view>
									<view class="tp">
										家长
									</view>
								</view>
							</view>
						</view>
						<view class="workList">
							<view class="workBox">
								<view class="wkitem" v-for="(l,lindex) in form.parentTask" :key="lindex">
									<view class="tit pink" :class="lindex==0?'s2':''">
										<view class="titin">
											<view class="tl">
												<view class="or">{{(lindex+1)}}</view>
												<view class="t">
													{{l.name}}
												</view>
											</view>
											<view class="tr">
												<view class="del" @tap="delParentTask(lindex)">
													<image src="@/static/images/icon-delete.svg" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
									<template v-for="(m,mindex) in l.list">
										<view class="rpt">
											<view class="subt">
												<view class="dot"></view>
												<view class="tc">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="del" @tap="delItem('parentTask',lindex,mindex)">
															<image src="@/static/images/icon-cha.svg" mode="aspectFit"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<view class="btncon" v-if="l.workType==1">
										<view class="addbtn" @tap="openLessonSelect('parentTask',lindex)">
											添加
										</view>
									</view>
									<view class="btncon" v-if="l.workType==4">
										<view class="addbtn" @tap="addEvaluation('parentTask',lindex)">
											添加
										</view>
									</view>
									<view class="btncon" v-if="l.workType==3&&info.taskOptions">
										<view class="wtips">
											<rich-text :nodes="info.taskOptions.tips.parent"></rich-text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-toast ref="uToast"></u-toast>
			<u-popup :show="show" @close="show=false" mode="center" :customStyle="{width:'100%',padding:'30rpx',boxSizing:'border-box',background:'none'}">
				<view class="taskPop">
					<view class="tit">
						添加任务项
					</view>
					<view class="tit2">
						干预方式（多选）
					</view>
					<view class="ls" v-if="addCategory&&addCategory.length>0">
						<view class="li" v-for="(cat,index) in addCategory" :key="index" :class="cat.values.length>0?'on':''">
							<view class="ll">
								{{cat.name}}
							</view>
							<view class="lr">
								<CheckboxGroup :multiple="true" :options="cat.taskTarget" @change="updateValues" :data-index="index"></CheckboxGroup>
							</view>
						</view>
					</view>
					<view class="ft">
						<view class="btn on" @tap="handleTaskAdd">
							确认添加
						</view>
						<view class="btn" @tap="show=false">
							取消
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="flex0 pd30 ftools">
			<view class="btn" @tap="openAddtask">
				<view class="ico">
					<image src="@/static/images/icon-add.svg" mode="aspectFit"></image>
				</view>
				<view class="p">
					添加任务项
				</view>
			</view>
			<view class="btn on" @tap="submit">
				<view class="p">
					发布任务
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onShow: function() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if (page.options['id']) {
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid: '101',
				show:false,
				addCategory:[],
				isNetHospital:false,
				permissions:[
					{
						value:0,
						label:'家长'
					},
					{
						value:1,
						label:'班主任'
					}
				],
				info: '',
				form: {
					viewPermission: [1],
					studentTask:[],
					teacherTask:[],
					parentTask:[],
					allTask:[]
				}
			}
		},
		methods: {
			submit(){//发布任务
				
			},
			viewDetail(id) { //通知详情
				uni.navigateTo({
					url:'/pages/notice/notice?id='+id
				})
			},
			previewLetter(id,formid){//预览转介信
				if(!formid){
					if(this.$refs.uToast){
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message:'请先完成表单!'
						});
					};
					return;
				};
				uni.navigateTo({
					url:'/pages/teacher/letter/letter?id='+id+'&formid='+formid
				})
			},
			openLetterForm(id){
				var that=this;
				let data={
					form:that.form
				};
				uni.setStorage({
					key:'tempData',
					data:JSON.stringify(data),
					success() {
						uni.navigateTo({
							url:'/pages/teacher/letter/form?id='+id
						})
					}
				})
				
			},
			handleTaskAdd(){//确认添加任务
				var that=this;
				that.addCategory.forEach(i=>{
					if(i.values.includes(1)){that.addTask(i.workType,'teacherTask');}
					if(i.values.includes(2)){that.addTask(i.workType,'studentTask');}
					if(i.values.includes(3)){that.addTask(i.workType,'parentTask');}
				});
				that.show=false;
			},
			updateValues(e){
				var that=this;
				var index=e.currentTarget.dataset.index;
				var value=e.detail.__args__[0];
				that.addCategory[index].values=value;
			},
			openAddtask(){//打开添加任务
				var that=this;
				that.addCategory=[];
				let options=JSON.parse(JSON.stringify(that.taskCategory));
				options.forEach(i=>{
					i.values=[];
					i.isSelected=false
				});
				that.addCategory=options;
				that.show=true;
			},
			openLessonSelect(target,index){//添加课程
				var that=this;
				let data={
					operateIndex:index,
					operateTarget:target,
					form:that.form
				};
				uni.setStorage({
					key:'tempData',
					data:JSON.stringify(data),
					success() {
						uni.navigateTo({
							url:'/pages/lesson/lesson'
						})
					}
				})
			},
			addEvaluation(target,index){//添加测评表
				var that=this;
				let data={
					operateIndex:index,
					operateTarget:target,
					form:that.form
				};
				uni.setStorage({
					key:'tempData',
					data:JSON.stringify(data),
					success() {
						uni.navigateTo({
							url:'/pages/selectEvaluation/selectEvaluation'
						})
					}
				})
			},
			delAllTask(index){//删除全体目标任务
				var that=this;
				that.form.allTask.splice(index,1);
			},
			delStudentTask(index){//删除学生任务
				var that=this;
				that.form.studentTask.splice(index,1);
			},
			delTeacherTask(index){//删除老师任务
				var that=this;
				that.form.teacherTask.splice(index,1);
			},
			delParentTask(index){//删除家长任务
				var that=this;
				that.form.parentTask.splice(index,1);
			},
			delItem(target,taskIndex,targetIndex){//删除任务内详细列表项，参数(对象名称，任务下标，列表项下标)
				var that=this;
				that.form[target][taskIndex].list.splice(targetIndex,1)
			},
			updatePermission(e){//更新档案权限
				this.form.viewPermission=e.detail.__args__[0];
			},
			getInfo() {
				var that = this;
				if (that.itemid) {
					var res = {
						id: 101,
						studentId:101,//学生ID标识，通知书模板需要
						name: '余夹雪',
						grade: '七年级',
						class:'一班',
						stage: 7,
						taskOptions:{
							tips:{//心理辅导通知内容
								student:'同学你好，生活中的烦恼和困惑，会让我们感到迷茫和无助。学校心理健康教育专职教师时刻准备着倾听你的心声为你提供专业的指导和支持。欢迎你随时预约咨询。',
								parent:'家长你好，生活中的烦恼和困惑，会让我们感到迷茫和无助。学校心理健康教育专职教师时刻准备着倾听你的心声为你提供专业的指导和支持。欢迎你随时预约咨询。'
							},
							netHospital:{
								id:101,
								title:'盛心互联网医院',
								subtitle:'《通知内容》'
							}
						}
					};
					that.info = res;
					that.initForm(that.info.stage);
				}
			},
			initForm(stage) {//按危机等级添加默认任务
				var that = this;
				switch (stage) {
					case 0: {
						that.addTask(1,'studentTask');
						that.addTask(2,'studentTask');
						break;
					};
					case 1: {
						that.addTask(1,'studentTask');
						that.addTask(2,'studentTask');
						that.addTask(0,'teacherTask');
						break;
					};
					case 2: {
						that.addTask(1,'studentTask');
						that.addTask(2,'studentTask');
						that.addTask(3,'studentTask');
						that.addTask(0,'teacherTask');
						break;
					};
					case 4: {
						that.addTask(5,'allTask');
						that.addTask(3,'allTask');
						break;
					};
					case 5: {
						that.addTask(6,'allTask');
						that.addTask(3,'allTask');
						break;
					};
					case 6: {
						that.addTask(7,'allTask');
						that.addTask(3,'allTask');
						break;
					};
					case 7: {
						that.addTask(8,'allTask');
						that.addTask(3,'allTask');
						break;
					};
				}
			},
			addTask(taskType,target) {//添加任务，参数(任务类型，任务目标)
				var that = this;
				var opt=JSON.parse(JSON.stringify(that.taskCategory[taskType]||{}));
				if(that.taskExist(taskType,target)){return};
				switch (taskType) {
					case 0: {
						opt.list=[{
								isComplete: true,
								messageType: 2,
								title: '日常访谈记录表',
								children: []
							},
							{
								isComplete: true,
								messageType: 3,
								title: '行为观察表',
								children: []
							},
							{
								isComplete: true,
								messageType: 4,
								title: '家访记录表',
								children: []
							}
						];
						break;
					};
					case 5:{
						opt={
							workType:5,
							name:'即时监护，防自杀、自伤',
							taskTarget:[],
							list:[
								{
									title:'家长：《安全告知书》',
									messageType:9,
									formdata:''
								},
								{
									title:'家长、心理委员、班主任、普通教师、校领导：《通知内容》',
									messageType:5,
									id:101
								}
							]
						};
						break;
					};
					case 6:{
						opt={
							workType:6,
							name:'即时监护，放暴力攻击',
							taskTarget:'',
							list:[
								{
									title:'家长：《安全告知书》',
									messageType:9,
									formdata:''
								},
								{
									title:'家长、心理委员、班主任、普通教师、校领导：《通知内容》',
									messageType:5,
									id:101
								}
							]
						};
						break;
					};
					case 7:{
						opt={
							workType:7,
							name:'校内会诊',
							taskTarget:[2,4,6],
							list:[
								{
									title:'会议时间/地点',
									messageType:6,
									formdata:{
										start:'',
										end:'',
										location:''
									}
								},
								{
									title:'家长：《通知内容》',
									messageType:10,
									toName:'家长'
								},
								{
									title:'班主任：《通知内容》',
									messageType:10,
									toName:'班主任'
								},
								{
									title:'校领导：《通知内容》',
									messageType:10,
									toName:'校领导'
								}
							]
						};
						break;
					};
					case 8:{
						opt={
							workType:8,
							name:'即时转介',
							taskTarget:[2,4,6],
							list:[
								{
									title:'《转介信通知》',
									messageType:0,
									formid:''
								}
							]
						};
						break;
					};
					default: {
						opt.list=[];
						break;
					};
				};
				that.form[target].push(opt);
			},
			taskExist(taskType,target){//任务是否已经存在，参数(任务类型，任务目标)
				var that=this;
				if(that.form[target].length==0){
					return false;
				}else{
					var ex=that.form[target].filter(i=>i.workType==taskType);
					return ex.length>0
				}
			},
			appendTaskList(target,index,arr){//添加任务详细列表项，参数(任务目标，任务下标，数据列表)
				var that=this;
				let ids=[];
				that.form[target][index].list.forEach(i=>{ids.push(i.id)});
				let appendArr=arr.filter(j=>{return !ids.includes(j.id)});
				let newArr=that.form[target][index].list.concat(appendArr);
				that.form[target][index].list=newArr;
			},
			viewSafetyNotice(target,taskIndex,index,formdata){//预览模板通知，参数(任务目标，任务下标，通知下标，已经填写的内容)
				var that=this;
				let data={
					operateIndex:taskIndex,
					operateTarget:target,
					targetIndex:index,
					form:that.form
				};
				if(formdata){
					data.formdata=JSON.stringify(formdata);
				};
				uni.setStorage({
					key:'tempData',
					data:JSON.stringify(data),
					success() {
						uni.navigateTo({
							url:'/pages/noticeTemplate/SafetyNotice'
						})
					}
				})
			},
			setConsultationDate(e){
				var that=this;
				that.form.allTask[0].list[0].formdata.start=e.start;
				that.form.allTask[0].list[0].formdata.end=e.end;
			}
		},
		watch: {
			itemid: function() {
				this.getInfo();
			}
		},
		mounted() {
			var that=this;
			that.getInfo();
		},
		onShow(){
			var that=this;
			uni.getStorage({
				key:'tempData',
				success(res) {
					let data=JSON.parse(res.data);
					let operateIndex=data.operateIndex;
					let operateTarget=data.operateTarget;
					let targetIndex=data.targetIndex;
					that.form=data.form;
					uni.getStorage({
						key:'lessonTemp',
						success(res) {
							let arr=JSON.parse(res.data);
							that.appendTaskList(operateTarget,operateIndex,arr);
							uni.removeStorage({
								key:'lessonTemp'
							})
						}
					});
					uni.getStorage({
						key:'cepingTemp',
						success(res) {
							let arr=JSON.parse(res.data);
							that.appendTaskList(operateTarget,operateIndex,arr);
							uni.removeStorage({
								key:'cepingTemp'
							})
						}
					});
					uni.getStorage({
						key:'templateData',
						success(res) {
							let formdata=JSON.parse(res.data);
							that.form[operateTarget][operateIndex].list[targetIndex].formdata=formdata;
							uni.removeStorage({
								key:'templateData'
							})
						}
					});
					uni.getStorage({
						key:'letterFormId',
						success(res) {
							let id=JSON.parse(res.data);
							that.form.allTask[0].list[0].formid=id;
							uni.removeStorage({
								key:'letterFormId'
							})
						}
					});
					uni.removeStorage({
						key:'tempData'
					});
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.wbox{
		padding: 30rpx 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		
		.wtit{
			display: flex;
			align-items: center;
			justify-content: space-between;
			&.border{
				border: 1rpx solid #f7f5f2;
			}
			.tl{
				flex: 1 1 auto;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.ico{
					flex: 0 0 auto;
					margin-right: 20rpx;
					image{
						display: block;
						width: 32rpx;
						height: 32rpx;
					}
				}
				.t{
					flex: 1 1 auto;
					overflow: hidden;
					font-size: 32rpx;
					color: #65554d;
				}
			}
			.tr{
				flex: 0 0 auto;
				.tag{
					padding: 0 20rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
				}
				.btn{
					padding: 0 12rpx;
					line-height: 40rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
					background: #df7f83;
					color: #fff;
				}
			}
		}
		.rwdx{
			padding: 26rpx 30rpx;
			text-align: center;
			margin: 30rpx -30rpx 0;
			background: #ffebf2;
			color: #df6982;
			font-size: 24rpx;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				right: 90rpx;
				bottom: 100%;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 6rpx solid #ffebf2;
			}
		}
		.workBox {
			padding: 10rpx 0;
			.btncon{
				padding-left: 60rpx;
				position: relative;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				.wtips{
					padding: 0 0;
				}
				&:before {
					content: "";
					position: absolute;
					left: 14rpx;
					width: 4rpx;
					bottom: 0;
					top: 0;
					background: #e8e8e8;
					z-index: 1;
				}
				.addbtn{
					text-align: center;
					line-height: 66rpx;
					border: 2rpx solid #fe9c29;
					border-radius: 20rpx;
					font-size: 28rpx;
					color: #fe9c29;
				}
			}
			.tit {
				padding: 20rpx 0;
				background: none;
				display: block;
				.or{
					background: #df7f83;
				}
				.del{
					image{
						display: block;
						width: 36rpx;
						height: 36rpx;
					}
				}
				.titin {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 30rpx 30rpx 0;
					background: linear-gradient(90deg, #fff, #dbf3e5);
					border-radius: 0 20rpx 20rpx 0;
				}
				.t{
					color: #df7f83;
				}
		
				&.pink {
					.titin {
						background: linear-gradient(90deg, #fff, #ffdeea);
					}
				}
		
				&:before {
					content: "";
					position: absolute;
					left: 14rpx;
					width: 4rpx;
					bottom: calc(50% + 10rpx);
					top: 0;
					background: #e8e8e8;
					z-index: 1;
				}
		
				&:after {
					content: "";
					position: absolute;
					left: 14rpx;
					width: 4rpx;
					top: calc(50% + 10rpx);
					bottom: 0;
					background: #e8e8e8;
					z-index: 1;
				}
		
				&.s2 {
					&:before {
						display: none;
					}
		
					&:after {
						display: block;
					}
				}
			}
			.rpt{
				.subt{
					padding: 10rpx 0;
					.tc{
						padding: 22rpx 22rpx 22rpx 0;
						border-radius: 20rpx;
						background: linear-gradient(90deg,#fff,#f2f2f2);
					}
					.tr{
						.del{
							image{
								display: block;
								width: 21rpx;
								height: 21rpx;
							}
						}
						&.btns{
							display: flex;
							align-items: center;
							.wm{
								flex: 0 0 auto;
								line-height: 40rpx;
								padding: 0 30rpx;
								color: #fe9c29;
							}
							.sw{
								flex: 0 0 auto;
							}
							.vl{
								flex: 0 0 auto;
								width: 2rpx;
								height: 24rpx;
								background: #d9d9d9;
							}
							.btn{
								min-width: 140rpx;
								margin-left: 10rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
		&.gyform{
			&.s1{
				.targetTag{
					background: #df7f83;
					.tp{
						color: #df7f83;
					}
				}
				.workBox{
					.tit{
						.or{
							background: #df7f83;
						}
						.t{
							color: #df7f83;
						}
						.titin{
							background: linear-gradient(90deg, #fff, #ffdeea);
						}
					}
				}
			}
			&.s2{
				.targetTag{
					background: #fe9c29;
					.tp{
						color: #fe9c29;
					}
				}
				.workBox{
					.tit{
						.or{
							background: #fe9c29;
						}
						.t{
							color: #fe9c29;
						}
						.titin{
							background: linear-gradient(90deg, #fff, #fff1de);
						}
					}
				}
			}
			&.s3{
				.targetTag{
					background: #78cb9b;
					.tp{
						color: #78cb9b;
					}
				}
				.workBox{
					.tit{
						.or{
							background: #78cb9b;
						}
						.t{
							color: #78cb9b;
						}
						.titin{
							background: linear-gradient(90deg, #fff, #dbf3e5);
						}
					}
				}
			}
		}
	}
	.interveneGrade{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.cl{
			flex: 1 1 auto;
			font-size: 28rpx;
			color: #897f7a;
			overflow: hidden;
			padding-right: 30rpx;
		}
		.cr{
			flex: 0 0 auto;
		}
	}
	.taskPop{
		background: #fff;
		padding: 40rpx 38rpx 10rpx;
		border-radius: 30rpx;
		color: #65554d;
		.tit{
			text-align: center;
			font-size: 40rpx;
			padding-bottom: 40rpx;
		}
		.tit2{
			padding-bottom: 24rpx;
			font-size: 28rpx;
		}
		.ls{
			padding-bottom: 20rpx;
			.li{
				display: flex;
				align-items: center;
				padding: 40rpx 28rpx;
				border-radius: 20rpx;
				background: linear-gradient(90deg,#f4f2ef,#f9f8f6);
				margin-bottom: 20rpx;
				.ll{
					font-size: 28rpx;
					flex: 1 1 auto;
					padding-right: 20rpx;
				}
				.lr{
					flex: 0 0 auto;
					/deep/.radio{
						background: #fff;
					}
				}
				&.on{
					background: linear-gradient(90deg,#ffefdd,#fff8f0);
				}
			}
		}
		.ft{
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			.btn{
				flex: 0 0 auto;
				width: 50%;
				font-size: 28rpx;
				color: #65554d;
				line-height: 100rpx;
				text-align: center;
				&.on{
					color: #fe9c29;
				}
			}
		}
	}
	.ftools{
		padding-top: 40rpx;
		padding-bottom: 60rpx;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		align-items: center;
		.btn{
			flex: 0 0 auto;
			font-size: 28rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fe9c29;
			background: #ffefdd;
			height: 90rpx;
			border-radius: 90rpx;
			margin-right: 20rpx;
			.ico{
				flex: 0 0 auto;
				margin-right: 20rpx;
				image{
					display: block;
					width: 34rpx;
					height: 34rpx;
				}
			}
			&.on{
				background: #fe9c29;
				color: #fff;
				flex: 1 1 auto;
			}
			&:last-child{
				margin-right: 0;
			}
		}
	}
	.hzform{
		flex: 0 0 auto;
		width: 100%;
		.hi{
			margin-bottom: 20rpx;
			background: #f3f3f3;
			border-radius: 80rpx;
			/deep/.dateRange {
				display: block !important;
				.box{
					background: #f3f3f3;
				}
			}
			input{
				padding: 0 30rpx;
				height: 80rpx;
				outline: none;
				border: none;
				font-size: 28rpx;
				background: none;
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>